<template>
  <div class="flex-col">
    <div class="justify-end">
      <div class="flex-row section">
        <div class="flex-col group_2">
          <span class="text">个性电台</span>
          <div class="flex-col group_3">
            <div class="flex-row group_4">
              <img
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507878457242464.png"
                class="image"
              />
              <span class="text_1">下午好</span>
            </div>
            <span class="text_2">来点下午的MUSIC吗？</span>
          </div>
        </div>
        <div class="flex-col items-center section_1">
          <img
            src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507990228543705.png"
            class="image_1"
          />
          <img
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507876602970351.png"
            class="image_2"
          />
        </div>
      </div>
      <div class="flex-col section_2">
        <div class="group_5">
          <span class="text_3">DAILY<br /></span>
          <span class="text_4">20</span>
        </div>
      </div>
    </div>
    <div class="flex-col group_6">
      <div class="justify-end group_7">
        <span class="text_5">寻屿 - 阿YueYue</span>
        <div class="flex-row group_8">
          <span>每日20首</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { personVideoAPI } from '@/api'
export default {
  data () {
    return {
      palyList: []
    }
  },
  async created () {
    const res = await personVideoAPI({
      limit: 1
    })
    this.palyList = res.data.result
  }

}
</script>

<style lang="scss" scoped>
.group_6 {
  margin-top: 7.5px;
  .group_7 {
    padding: 0 4.5px;
    .text_5 {
      margin-right: 150px;
      color: rgb(255, 255, 255);
      font-size: 12px;
      font-weight: 500;
      line-height: 11px;
      white-space: nowrap;
    }
    .group_8 {
      color: rgb(255, 255, 255);
      font-size: 12px;
      font-weight: 500;
      line-height: 11.5px;
      white-space: nowrap;
      margin-right: 50px;
      .text_7 {
        margin-left: 45.5px;
      }
    }
  }
}
.section {
  margin-right: 7px;
  margin-bottom: 1px;
  padding: 13.5px 12.5px 13.5px 15px;
  border-radius: 13.5px;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507847630808694.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 93.5px;
  .group_2 {
    margin-top: 3px;
    .text {
      color: rgb(255, 255, 255);
      font-size: 18px;
      font-weight: 700;
      line-height: 17.5px;
      letter-spacing: -0.45px;
      white-space: nowrap;
    }
    .group_3 {
      margin-top: 13.5px;
      padding-left: 2px;
      .group_4 {
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 700;
        line-height: 11.5px;
        letter-spacing: -0.3px;
        white-space: nowrap;
        .image {
          width: 20px;
          height: 17.5px;
        }
        .text_1 {
          margin: 3.5px 0 3.5px 3.5px;
        }
      }
      .text_2 {
        margin-left: 1.5px;
        margin-top: 5px;
        color: rgb(255, 255, 255);
        font-size: 10px;
        line-height: 9.5px;
        letter-spacing: -0.25px;
        white-space: nowrap;
      }
    }
  }
  .section_1 {
    margin-left: 5px;
    padding: 20.5px 0 19px;
    border-radius: 13.5px;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507849606643493.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 66.5px;
    height: 66.5px;
    position: relative;
    .image_1 {
      width: 21.5px;
      height: 21.5px;
      position: absolute;
      left: 6.5px;
      bottom: 7.5px;
    }
    .image_2 {
      width: 41.5px;
      height: 27px;
      position: relative;
    }
  }
}
.section_2 {
  margin-right: 20px;
  margin-left: 20px;
  padding: 5px 0 62.5px;
  border-radius: 13.5px;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507853334713419.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 93.5px;
  height: 93.5px;
  .group_5 {
    margin-left: 7.5px;
    line-height: 13px;
    width: 52.5px;
    .text_3 {
      color: rgb(255, 255, 255);
      font-size: 16px;
      line-height: 13.5px;
    }
    .text_4 {
      color: rgb(255, 255, 255);
      font-size: 16px;
      line-height: 13.5px;
    }
  }
}
.image_3 {
  border-radius: 13.5px;
  width: 93.5px;
  height: 93.5px;
}
</style>